<template>
    <div class="statisticsProjects">
        <el-tabs type="border-card">
            <el-tab-pane label="项目统计">
                <div class="search-wrap">
                    <div class="item">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="startDate" type="date" placeholder="开始日期">
                        </el-date-picker>
                    </div>
                    <div class="item">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="endDate" type="date" placeholder="结束日期">
                        </el-date-picker>
                    </div>
                    <div class="item">
                        <el-button class="btn bg-blue" @click="queryClick">查询</el-button>
                        <el-button class="btn" @click="resetClick">重置</el-button>
                    </div>
                </div>
                <div ref="chartRef" class="e-chart" style="width: 100%;height:600px;"></div>
            </el-tab-pane>
            <el-tab-pane label="项目列表">
                <div class="search-wrap">
                    <div class="item">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="startDate" type="date" placeholder="开始日期">
                        </el-date-picker>
                    </div>
                    <div class="item">
                        <el-date-picker value-format="yyyy-MM-dd" v-model="endDate" type="date" placeholder="结束日期">
                        </el-date-picker>
                    </div>
                    <div class="item">
                        <el-button class="btn bg-blue" @click="queryClick">查询</el-button>
                        <el-button class="btn" @click="resetClick">重置</el-button>
                    </div>
                </div>
                <div class="query-box t-rig">
                    <el-button @click="statisticsExport('xiangmu')" class="btn" type="primary">导出</el-button>
                </div>
                <el-table v-loading="loading" :header-cell-style="headerStyle" :data="tableData" tooltip-effect="dark" style="width: 100%">
                    <el-table-column prop="department" label="所属单位">
                    </el-table-column>
                    <el-table-column prop="count" label="数量">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import {request} from "@/assets/js/utils/request";
import *as echarts from 'echarts'
import mixin from '@/assets/js/mixin'
export default{
    mixins: [mixin],
    data() {
        return {
            loading: false,
            headerStyle: {
                background: '#f2f2f2',
                color: '#000',
            },
            startDate:'',
            endDate: '',
            tableData: []
        }
    },
    mounted() {
        this.initData()
    },
    methods: {
        echartData(xData,yData) {
            var myChart = echarts.init(this.$refs.chartRef);
            myChart.setOption({
                tooltip: {
                    trigger: 'item'
                },
                grid: {
                    // top: "18%",
                    // left: "5%",
                    // right: "4%",
                    bottom: "10%",
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: xData,
                    axisLabel: { interval: 0, rotate: 30 }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        barWidth: 30,
                        data: yData,
                        type: 'bar',
                        // label:{
                        //     show: true,
                        //     position: 'top',
                        //     formatter: '{c}'
                        // }
                    }
                ]
            });
        },
        queryClick() {
            this.initData()
        },
        resetClick() {
            this.startDate = ''
            this.endDate = ''
            this.initData()
        },
        initData() {
            this.loading = true
            request({
                url: '/manager/statistics/dataCollegeQuery.jsp',
                method: 'post',
                data: {
                    txtAction: 'college',
                    startDate: this.startDate,
                    endDate: this.endDate
                }
            }).then(res => {
                if(res.code == 200) {
                    this.tableData = res.data || []
                    let xArry = []
                    let yArry = []
                    this.tableData.forEach((obj)=> {
                        xArry.push(obj.department)
                        yArry.push(obj.count)
                    })
                    this.echartData(xArry,yArry)
                    this.loading = false
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.statisticsProjects{
    /deep/.search-wrap{
        margin: 20px 0;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        background: #b1cbff;
        .item{
            width: 25%;
            padding: 5px;
        }
        .btn{
            padding: 0;
            width: 80px;
            height: 32px;
            border: none;
        }
        .bg-blue{
            color: #ffffff;
            background: #016aed;
        }
        .el-select {
            width: 100%;
        }
        .el-input{
            .el-input__inner{
                height: 32px;
            }
        }
        .el-date-editor{
            width: 100%;
            .el-input{
                width: 100%;
            }
            .el-input__prefix{
                .el-input__icon{
                    line-height: 32px;
                }
            }
        }
    }
    .query-box{
        margin: 20px 0;
        .btn{
            padding: 0;
            width: 100px;
            height: 32px;
            background: #016aed;
        }
    }
}
</style>